<template>
  <div class="container">
    <div class="banner">
      <img :src="imgList.wanbanner" alt srcset>
      <img class="share-btn" @click="shareFriend" src="https://tjjstatic.taojiji.com/wapsite/default/newactivity/newYearShop/img/shares.png" alt>
    </div>

    <div class="goods-content">
      <div class="single-goods" v-for="(item, i) in goodsList" :key="i" @click="goGoodsDetail(item.goodsId)">
        <div class="pic">
          <x-img :default-src="imgList.defaultSrc" :src="item.imgUrl" alt/>
          <div class="left-icon">
            <p>直降</p>
            <p>{{ item.reducePrice }}元</p>
          </div>
        </div>

        <div class="desc">
          <div class="good-name">{{ item.title }}</div>
          <div class="good-desc"></div>
          <div class="good-price">
            钜惠价：￥
            <span>{{ item.price }}</span>
          </div>
          <div class="good-old-price">￥{{ item.shop_price}}</div>

          <span class="buy-now">立即抢</span>
        </div>
      </div>
    </div>

    <div class="more">
      <img :src="imgList.wanmiddle" alt>
    </div>

    <div class="recommend-goods">
      <div class="recomment" v-for="(item, i) in recommentList" :key="i">
        <div class="content" @click="goGoodsDetail(item.goodsId)">
          <x-img :default-src="imgList.defaultSrc" :src="item.imgUrl" alt/>

          <div class="goods-name">{{ item.title }}</div>
          <div class="price-btn">
            <div class="price">
              特卖价:
              <span class="new-price">{{ item.price }}</span>
              <span class="old-price">￥{{ item.shop_price}}</span>
            </div>
            <div class="btn">抢购></div>
          </div>

          <img class="hot" src="https://tjjstatic.taojiji.com/wapsite/default/static/img/hot.png" alt>
        </div>
      </div>
    </div>

    <div @click="goIndex">
      <img :src="imgList.wanbottom" alt>
    </div>
  </div>
</template>
<script>
import Lib from "assets/js/Lib";
import { Toast, XImg, Loading } from "vux";
export default {
  data() {
    return {
      defaultSrc: "", // 懒加载默认图片
      imgList: [],
      goodsList: [],
      recommentList: [],
      personMessage: {
        user_id: 1,
        token: 1,
        uuid: 1
      }
    };
  },
  created() {
    // 显示
    // 显示
    this.$vux.loading.show({
      text: "Loading"
    });

    if (window.location.hostname == "localhost") {
      window.person = {
        token: "fe56b97524e55c9_",
        uuid: "928b4d96-687d-4b4b-85b2-bd4b02d4f553",
        user_id: "20643928697404606"
      };
    }
    this.personMessage = {
      user_id: window.person.user_id,
      token: window.person.token,
      uuid: window.person.uuid
    };

    this.getGoodsData();
    this.getRecommentData();
    this.addImgUrl();
  },
  methods: {
    shareFriend() {
      setTimeout(function() {
        yearShare(
          "玩大才过瘾！免费砸金蛋100%中奖更有西门子冰箱等你来拿",
          "活动"
        );
        // share("玩大才过瘾！免费砸金蛋100%中奖更有西门子冰箱等你来拿", "");
      }, 300);
    },
    addImgUrl() {
      var baseUrl =
        window.location.host == "a.taojiji.com"
          ? "https://tjjstatic.taojiji.com/wapsite/default/newactivity/newYearShop/"
          : "http://tjjstatic.shan666.com/wapsite/default/newactivity/newYearShop/";
      this.imgList = {
        wanbanner: baseUrl + "img/wanbanner.jpg",
        wanmiddle: baseUrl + "img/wanmiddle.jpg",
        wanbottom: baseUrl + "img/wanbottom.jpg",
        defaultSrc: baseUrl + "img/loading.png",
        shares: baseUrl + "img/shares.png"
      };
    },

    // 首选玩物
    getGoodsData() {
      let goods_ids =
        window.location.host == "a.taojiji.com"
          ? "1639903,1721359,1743082,1748585,1592215,1619185,1620351,1612605,1656708,1743866,1747098"
          : "247348,442212,512274,1214717,1214719,1214721,1214825,1214827";
      this.$http
        .post(
          `${this.$apis.apis.newYearGoods}`,
          this.$qs.stringify({
            user_id: this.personMessage.user_id,
            token: this.personMessage.token,
            uuid: this.personMessage.uuid,
            goods_ids,
            all: 1
          })
        )
        .then(({ data }) => {
          // 隐藏
          this.$vux.loading.hide();
          this.goodsList = data.data.map(res => ({
            ...res,
            reducePrice: +(res.shop_price - res.price).toFixed(2)
          }));
        });
    },

    getRecommentData() {
      var goods_ids =
        window.location.host == "a.taojiji.com"
          ? "1269730,1595415,1599752,1739856,1626862,1101937,1601205,1625570,1592428,1618333,1596450,901956,1604711,1104336,1626138,1101846,1603515,1596509,1647550,1654803,1614205,1630150,1066821,1642280,668935,1756948,1597419,1611859,1104331,1746427,1602207,1605688,1610877,1733649,1622193,1650162,1616701,1642204,1620716,1651834,1639835,1643091,1535561,1624788,1183054,1640022,1618979,1640134,1644293,1619539,1625502,1626456,1624498,1636822,1633000,1636738,1631277,1594210,1610461,1630026,1643684,1648127,1649266,1648370,910269,1060899,1618348,1626129,1656319,1652844,1289984,1670468,1660000,1662374,1663814,1396601,86321,1077795,1602389,1716705,1719510,1713765,1716793,1720847,1733447,1726819,1603921"
          : "247348,442212,512274,1214717,1214719,1214721,1214825,1214827,1214829,1214885,1214907,1214908,1214909,1214911,1214912,1214916,1214917,1214919";

      this.$http
        .post(
          `${this.$apis.apis.newYearGoods}`,
          this.$qs.stringify({
            user_id: this.personMessage.user_id,
            token: this.personMessage.token,
            uuid: this.personMessage.uuid,
            goods_ids,
            all: 1
          })
        )
        .then(({ data }) => {
          // 隐藏
          this.$vux.loading.hide();
          this.recommentList = data.data.map(res => ({
            ...res,
            reducePrice: +(res.shop_price - res.price).toFixed(2)
          }));
        });
    },

    goGoodsDetail(value) {
      jump2good(value);
    },

    // 跳回主会场
    goIndex() {
      window.location.href = `/NewActivity/index/user_id/${
        this.personMessage.user_id
      }/token/${this.personMessage.token}/uuid/${this.personMessage.uuid}`;
    }
  },

  components: {
    XImg,
    Toast,
    Loading
  },

  filters: {},

  mounted() {}
};
</script>
<style lang="less" scoped>
@baseColor: #e92229;
img {
  width: 100%;
  display: block;
}
.banner {
  position: relative;
  .share-btn {
    position: absolute;
    top: 0;
    right: 0.2rem;
  }
}
.goods-content {
  position: relative;
  padding: 0 0.46rem;
  background: #f00 url(../../../assets/images/newyearshop/line.jpg);
  background-size: contain;
}
.single-goods {
  display: flex;
  color: #000;
  margin-bottom: 0.08rem;
  background-color: #fff;
  .pic {
    position: relative;
    box-sizing: border-box;
    width: 2.7rem;
    height: 2.7rem;
    padding: 0.1rem;
    img {
      width: 100%;
      height: 100%;
    }
    .left-icon {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      width: 0.9rem;
      height: 0.95rem;
      background: url(../../../assets/images/newyearshop/icon.png) no-repeat;
      background-size: contain;
      p {
        text-align: center;
        color: #fff;
        font-size: 0.26rem;
      }
    }
  }

  .desc {
    width: 3.94rem;
    padding: 0 0.25rem;
    box-sizing: border-box;

    position: relative;
    .buy-now {
      position: absolute;
      bottom: 0.15rem;
      right: 0.15rem;
      width: 1.84rem;
      line-height: 0.42rem;
      text-align: center;
      background-color: #e92229;
      color: #fff;
      border-radius: 0.1rem;
    }
    .good-name {
      height: 0.47rem;
      line-height: 0.47rem;
      font-size: 0.3rem;
      font-weight: bold;
      overflow: hidden;
    }
    .good-desc {
      font-size: 0.26rem;
      color: @baseColor;
      height: 0.92rem;
      line-height: 0.46rem;
      overflow: hidden;
    }
    .good-price {
      // padding-top: .3rem;
      line-height: 0.78rem;
      border-top: 0.01rem dashed #ccc;
      font-size: 0.26rem;
      color: @baseColor;
    }
    .good-old-price {
      font-size: 0.27rem;
      color: #aaaaaa;
      text-decoration: line-through;
    }
  }
}
.single-goods:last-child {
  margin-bottom: 0;
}

.recommend-goods {
  display: flex;
  box-sizing: border-box;
  flex-wrap: wrap;
  padding: 0 0.46rem;
  // background-color: #db0c20;
  background: #f00 url(../../../assets/images/newyearshop/line.jpg);
  background-size: contain;
  .recomment {
    width: 49%;
    margin: 0.12rem 0.5% 0;
    background: #db0c20;
    .content {
      position: relative;
      padding: 0.09rem;
      background-color: #fff;
      img {
        width: 3rem;
        height: 3rem;
      }
      .hot {
        position: absolute;
        right: 0.12rem;
        top: 0;
        width: 0.59rem;
        height: 0.98rem;
      }
    }
    .goods-name {
      font-size: 0.27rem;
      height: 0.5rem;
      line-height: 0.5rem;
      overflow: hidden;
    }

    .price-btn {
      display: flex;
      justify-content: space-between;
      font-size: 0.23rem;
      height: 0.5rem;
      overflow: hidden;
      color: #e92229;
      .new-price {
        font-size: 0.34rem;
      }
      .old-price {
        font-size: 0.22rem;
        color: #aaa;
        text-decoration: line-through;
      }
      .btn {
        width: 0.96rem;
        height: 0.39rem;
        line-height: 0.39rem;
        color: #fff;
        font-size: 0.26rem;
        background-color: #e92229;
        text-align: center;
        border-radius: 0.1rem;
      }
    }
  }
}
.share-btn {
  width: .9rem;
  position: absolute;
  right: 0.01rem;
  top: 0;
  height: 1.2rem;
}
</style>
